<include file="public@head" />
<link rel="stylesheet" type="text/css" href="__ROOT__/static/js/webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="__ROOT__/static/js/webuploader/image-upload/style.css">
<style>
.layui-tab,.layui-tab-item{
    width:100%;
    min-height:86%;
}

.layui-upload-img {
    width: 98px;
    height: 98px;
    margin: 0 10px 10px 0;
}

</style>
</head>

<body>
    <div class="layui-fluid" id="component-tabs">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card" style="padding:16px;">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="{$tab=='local'?'layui-this':''}"><a href="" data-toggle="tab">上传文件</a></li>
                            <li class="{$tab=='url'?'layui-this':''}"><a href="" data-toggle="tab">网络文件</a></li>
                            <notempty name="has_cloud_storage">
                                <php>
                                    $url_params=input('param.');
                                    $url_params['tab']='cloud';
                                </php>
                                <li><a href="{:url('user/Asset/webuploader',$url_params)}">上传到云存储</a></li>
                            </notempty>
                            <!--<li class=""><a href="#explorer" data-toggle="tab">文件管理</a></li>-->
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show" id="wrapper">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="test-upload-more">选择图片</button>
                                    <span>点击上传，或将文件拖拽到此处,单次最多可选{$max_files}个文件</span>
                                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;overflow-y: auto">
                                        预览图：
                                        <div class="layui-upload-list" id="test-upload-more-list"></div>
                                    </blockquote>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">请输入网址</label>
                                    <div class="layui-input-block">
                                        <input type="hidden" id="img_name" value="">
                                        <input type="text" id="info" name="info[filename]" lay-verify="identity" placeholder="http://" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="tab-pane" id="explorer">
                                    <div class="bk3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <include file="public@footer" />
    <script src="__ROOT__/static/js/webuploader/webuploader.min.js"></script>
    <script type="text/javascript">
    var httpUrl = "{:cmf_get_asset_url('')}";
    window.f = [];

    layui.use(['index', 'upload'], function() {
        var upload = layui.upload,
            $ = layui.$;

        //多文件列表示例
        var demoListView = $('#test-upload-demoList'),
            uploadListIns = upload.render({
                elem: '#test-upload-more',
                url: '{:url("user/Asset/webuploader")}',
                accept: "{$filetype=='image'?'images':$filetype}",
                multiple: {$multi? 'true' : 'false' }, //是否允许同时选多个文件
                number: {$max_files}, //允许上传多少文件
                auto: true,
                // exts: '{$extensions}',
                before: function(obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result) {
                        $('#test-upload-more-list').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                },
                done: function(res, index, upload) {
                    console.log(res);
                    if (res.code == 1) { //上传成功

                        window.f.push(res.data);

                    }
                },
                error: function(index, upload) {}
            });
    });

    function get_selected_files() {

        var idPre = 'id' + new Date().getTime();
        var files = [];
        console.log(idPre+1);

        if ($("#wrapper").is(":hidden")) {
            var file = new Object();
            file.id = idPre + '1';
            file.filepath = $("#info").val();
            file.preview_url = file.filepath;
            file.url = file.filepath;
            file.name = "";
            files.push(file);
        } else {
            var f = window.f;
            var file = new Object();
            for (var i in window.f) {
                file.id = idPre + i;
                file.filepath = f[i]["filepath"];
                file.preview_url = f[i]["preview_url"];
                file.url = f[i]["url"];
                file.name = f[i]["name"];
                if (file.url == undefined) {
                    continue;
                } else {
                    files.push(file);
                }
            }
        
        }
        console.log(files);
    }
    </script>
</body>

</html>